feat(ui): Add flush appearance option by alexcarpenter · Pull Request #8510 · clerk/javascript

alexcarpenter · 2026-05-08T13:56:48Z

Description

Introduce new elevation appearance option that allows rendering components "flush" on the page vs being wrapped in a card. Options include raised|flush with raised being the default for backwards compat.

Note this only applies to page-mounted components modals/popovers always use raised.

Raised	Flush

Docs: clerk/clerk-docs#3355

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

vercel · 2026-05-08T13:56:54Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	May 18, 2026 7:31pm

changeset-bot · 2026-05-08T13:56:54Z

🦋 Changeset detected

Latest commit: f59b6ad

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Minor
@clerk/chrome-extension	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-05-15T18:47:00Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: fd15d73e-16da-40af-9c05-174909fcac34

📥 Commits

Reviewing files that changed from the base of the PR and between 38d6803 and f59b6ad.

📒 Files selected for processing (1)

packages/ui/src/elements/Card/CardRoot.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

packages/ui/src/elements/Card/CardRoot.tsx

📝 Walkthrough

Walkthrough

Adds an elevation appearance option for card-based UI with values 'raised' (default) and 'flush'. CardRoot reads modal context, an explicit prop, or parsed appearance options to determine elevation; flush injects element overrides and sets data-elevation="flush". Popover and profile cards (and modals) are forced to raised. The shadcn theme uses the attribute to drop shadow/border. The sandbox gets elevation and devWarnings controls with sessionStorage persistence and applies appearance updates during init.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

clerk/javascript#8521: Adds another appearance option (autoFocus) and updates internal/appearance.ts and customizables/parseAppearance.ts, touching similar appearance-system code.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: introducing a new 'flush' appearance option for the UI components.
Description check	✅ Passed	The description is directly related to the changeset, explaining the new elevation appearance option, its usage, and providing visual comparison between raised and flush modes.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2026-05-15T18:50:25Z

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8510

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8510

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8510

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8510

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@8510

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8510

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8510

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8510

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8510

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8510

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8510

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8510

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8510

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8510

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8510

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8510

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8510

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8510

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8510

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8510

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8510

commit: f59b6ad

wobsoriano

✨

github-actions Bot added the ui label May 8, 2026

nikosdouvlis approved these changes May 8, 2026

View reviewed changes

github-actions Bot added the clerk-js label May 8, 2026

vercel Bot deployed to Preview May 8, 2026 17:21 View deployment

vercel Bot deployed to Preview May 8, 2026 17:27 View deployment

vercel Bot deployed to Preview May 8, 2026 19:01 View deployment

vercel Bot deployed to Preview May 8, 2026 20:46 View deployment

vercel Bot deployed to Preview May 14, 2026 11:49 View deployment

vercel Bot deployed to Preview May 14, 2026 12:33 View deployment

alexcarpenter marked this pull request as ready for review May 15, 2026 18:45

vercel Bot deployed to Preview May 15, 2026 18:46 View deployment

wobsoriano approved these changes May 16, 2026

View reviewed changes

alexcarpenter added 5 commits May 18, 2026 11:58

feat(ui): Add flush appearance option

84d521f

scope to subset of components

103cabe

Update app.ts

b352c5e

add changeset

62c170c

shadcn theme reset for flush

1c81b05

alexcarpenter force-pushed the carp/flush-option branch from e3bc1bc to 1c81b05 Compare May 18, 2026 15:58

vercel Bot deployed to Preview May 18, 2026 15:59 View deployment

make spacing consistent

38d6803

vercel Bot deployed to Preview May 18, 2026 19:27 View deployment

Update CardRoot.tsx

f59b6ad

vercel Bot deployed to Preview May 18, 2026 19:31 View deployment

wobsoriano approved these changes May 18, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): Add flush appearance option#8510

feat(ui): Add flush appearance option#8510
alexcarpenter wants to merge 7 commits into
mainfrom
carp/flush-option

alexcarpenter commented May 8, 2026 •

edited

Loading

Uh oh!

vercel Bot commented May 8, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented May 8, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented May 15, 2026 •

edited

Loading

Walkthrough

Estimated code review effort

Possibly related PRs

❌ Failed checks (1 warning)

Uh oh!

pkg-pr-new Bot commented May 15, 2026 •

edited

Loading

Uh oh!

wobsoriano left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

alexcarpenter commented May 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

vercel Bot commented May 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented May 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Possibly related PRs

❌ Failed checks (1 warning)

Uh oh!

pkg-pr-new Bot commented May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wobsoriano left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

alexcarpenter commented May 8, 2026 •

edited

Loading

vercel Bot commented May 8, 2026 •

edited

Loading

changeset-bot Bot commented May 8, 2026 •

edited

Loading

coderabbitai Bot commented May 15, 2026 •

edited

Loading

pkg-pr-new Bot commented May 15, 2026 •

edited

Loading